<#assign title="图表列表", table="layui-this">
<#include "header.ftl">
    <style>
    /*------公共样式开始------*/
    .layui-inline .layui-form-label {
        width: auto;
    }
    /*------公共样式结束------*/
    /*小屏幕设备*/
    @media (max-width: 767px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

    /*中大型屏幕设备*/
    @media (min-width: 768px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }
</style>

    <div class="layui-body my-body" style="background-color: #F2F2F2;margin-top: 20px;padding-left: 15px;padding-right: 15px;">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">同类型成果数目统计</div>
                    <div class="layui-card-body">
                        <div id="type" style="width: 600px;height: 350px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">同队长成果数目统计</div>
                    <div class="layui-card-body">
                        <div id="user" style="width: 600px;height: 350px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">近俩年成果类型分布情况统计</div>
                    <div class="layui-card-body">
                        <div id="typeLine" style="width: 600px;height: 400px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">近十年TOP10用户成功数分布情况统计</div>
                    <div class="layui-card-body">
                        <div id="userTimeLine" style="width: 600px;height: 400px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/echarts.min.js"></script>
    <script src="/js/echarts/type.js"></script>
    <script src="/js/echarts/user.js"></script>
    <script src="/js/echarts/typeLine.js"></script>
    <script src="/js/echarts/userTimeLine.js"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form
                , $ = layui.$;

            $.getType(document.getElementById("type"));

            $.getUser(document.getElementById("user"));

            $.getTypeLine(document.getElementById("typeLine"));

            $.getUserTimeLine(document.getElementById("userTimeLine"));

        })
    </script>
<#include "footer.ftl">